import React, { Component } from 'react';
import { withRouter, Link } from 'react-router-dom';
import { Table, Pagination } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import TableFilter from './TableFilter';
import EditDialog from './EditDialog';
import ResetDialog from './ResetDialog';
import DataBinder from '@icedesign/data-binder';

@withRouter
@DataBinder({
  filterData: {
    url: '/api/sysuserFilter',
    method:'post',
    data:{
      pageSize:10,
      page: 1,
    },
    defaultBindingData: {
      pagination: {
        page: 1,
        total: 0,
        pageSize: 10
      },
      table: []
    }
  },
  updateData:{
    url: '/api/setUserInfo',
    method:'post'
  },
  resetPassData:{
    url: '/api/resetPasswd',
    method:'post'
  },
})
export default class SearchTable extends Component {
  static displayName = 'SearchTable';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      current: 1,
    };

    this.columns = [
      {title: '用户编号',dataIndex: 'id',key: 'id',},
      {title: '姓名',dataIndex: 'user_name',key: 'user_name',},
      {title: '登录用户名称',dataIndex: 'login_name',key: 'login_name',},
      {title: '状态',dataIndex: 'status',key: 'status',},
      {title: '机构ID',dataIndex: 'org_id',key: 'org_id',},
      {title: '机构类型',dataIndex: 'org_level',key: 'org_level',},
      {
        title: '操作',
        key: 'action',
        render: (value, index, record) => {
          return (
            <span>
              <EditDialog index={index} record={record} updateFormValues={this.updateFormValues}  />
              <ResetDialog index={index} record={record} ResetValues={this.ResetValues} />
            </span>
          );
        },
      },
    ];
  }

  addUser = () => {
    this.props.history.push('/userCreate');
  };

  renderColumns = () => {
    return this.columns.map((item) => {
      if (typeof item.render === 'function') {
        return (
          <Table.Column
            title={item.title}
            key={item.key}
            cell={item.render}
            width={item.width || 150}
          />
        );
      }

      return (
        <Table.Column
          key={item.key}
          title={item.title}
          dataIndex={item.dataIndex}
          width={item.width || 150}
        />
      );
    });
  };



  updateFormValues = (values) => {
    // 有些参数可能需要从数据中获取
    this.props.updateBindingData('updateData', {
      data:{
        values:values
      }
    });
  };

  ResetValues = (values) => {
    values.password = 'RESET';
    this.props.updateBindingData('resetPassData', {
      data:{
        values:values
      }
    });
  };


  componentDidMount() {
    // 第一次渲染，初始化第一页的数据
    this.props.updateBindingData('filterData');
  }


  handlePaginationChange = (current) => {
    this.setState({
      current,
    });
    // 有些参数可能需要从数据中获取
    this.props.updateBindingData('filterData', {
      data:{
        pageSize:10,
        page: current,
      }
    });
  };

  fetchData = (value) => {
    this.setState({
      value:value,
    });
    this.props.updateBindingData('filterData', {
      data:{
        pageSize:10,
        page: 1,
        value:value,
      }
    });

  };

  render() {
    const dataList= this.props.bindingData.filterData;
    const { current } = this.state;

    return (
      <IceContainer style={styles.container}>
        <h4 style={styles.title}>用户管理</h4>
        <TableFilter fetchData={this.fetchData} addUser={this.addUser}/>
        <Table
          dataSource={dataList.table}
          hasBorder={false}
          style={{ padding: '0 20px 20px' }}
        >
          {this.renderColumns()}
        </Table>
        <Pagination
          style={styles.pagination}
          current={dataList.pagination.pageIndex}
          pageSize={dataList.pagination.pageSize}
          total={dataList.pagination.recordTotal}
          onChange={this.handlePaginationChange}
        />
      </IceContainer>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0 0 20px',
  },
  title: {
    margin: '0',
    padding: '15px 20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    textAlign: 'right',
    marginRight: '20px',
  },
};
